<html>

<head>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script>
</head>

<body>
    <div id="app">
        <div id="myChart1" :style="{width: '100%', height: '50%'}"></div>
        <div id="myChart" :style="{width: '100%', height: '50%'}"></div>

    </div>
    <script>
        let vueDemo = new Vue({
            el: '#app',
            data: {
                myChart: null,
                myChart1: null,
                sockets: {
                    serverUrl:'ws://127.0.0.1:5003',//socket服务地址
                    liveSocket: null,
                },
                option: {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                        }
                    },
                    title: {
                        left: 'center',
                        text: 'V8 内存使用情况 (单位：MB)',
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [0]
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [{
                        name: 'V8 堆的总大小heapTotal (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }, {
                        name: 'V8 已分配的内存heapUsed (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }, {
                        name: 'V8 操作系统分配给进程的总的内存大小rss (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }, {
                        name: 'V8 进程使用到的系统链接库所占用的内存external (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }]
                },
                option1: {
                    tooltip: {
                        trigger: 'axis',
                        position: function (pt) {
                        }
                    },
                    title: {
                        left: 'center',
                        text: '系统内存使用情况 (单位：MB)',
                    },

                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: [0]
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%']
                    },
                    series: [{
                        name: '系统内存 (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }, {
                        name: '系统已用内存 (单位：MB)',
                        type: 'line',
                        data: [0],
                        symbol: 'none',
                        smooth: true,
                        areaStyle: {
                        },
                    }]
                }
            },
            mounted: function () {
                this.myChart = echarts.init(document.getElementById('myChart'));
                this.myChart1 = echarts.init(document.getElementById('myChart1'));
                this.createTutorSocket();
                this.getChart();
            },
            methods: {
                createTutorSocket: function () {
                    let url = this.sockets.serverUrl;
                    this.sockets.liveSocket = new WebSocket(url);
                    this.sockets.liveSocket.onopen = this.liveSocketOpen;
                    this.sockets.liveSocket.onerror = this.liveSocketError;
                    this.sockets.liveSocket.onmessage = this.liveSocketMessage;
                    this.sockets.liveSocket.onclose = this.liveSocketClose;
                },
                liveSocketOpen: function () {
                    this.liveHeartCheckFun(); //心跳
                    this.setMessage();

                },
                liveSocketError: function () { },
                liveSocketMessage: function (e) {
                    const redata = JSON.parse(e.data);
                    switch (redata.type) {
                        case 'MESSAGE':
                            this.option.series[0].data.push(redata.data.heapTotal);
                            this.option.series[1].data.push(redata.data.heapUsed);
                            this.option.series[2].data.push(redata.data.rss);
                            this.option.series[3].data.push(redata.data.external);
                            this.option.xAxis.data.push(redata.data.time);
                            this.option1.series[0].data.push(redata.data.osTotalmem);
                            this.option1.series[1].data.push(redata.data.osUseFreemem);
                            this.option1.xAxis.data.push(redata.data.time);
                            this.myChart.setOption(this.option);
                            this.myChart1.setOption(this.option1);
                            break;
                        default:
                            break;
                    }
                },
                liveSocketClose: function () { },
                liveHeartCheckFun: function () {
                    let data = `{"type": "PING","data": {}}`;
                    setInterval(() => {
                        this.setSocketSend(data);
                    }, 5000)
                },//心跳检测
                setSocketSend: function (message) {
                    let { liveSocket } = this.sockets;
                    if (liveSocket) {
                        liveSocket.send(message);
                    }
                },//发送消息
                setMessage: function () {
                    let data = `{"type": "MESSAGE","data": {}}`;
                    setInterval(() => {
                        this.setSocketSend(data);
                    }, 1000)
                },
                getChart: function () {

                    // 绘制图表
                    this.myChart.setOption(this.option);
                    this.myChart1.setOption(this.option1);
                }

            }
        })
    </script>
</body>

</html>